<template>
	<view :class="klass" class="item" :id="'id_' + goods.product_id">
		<view class="goods-image m-goods-img">
			<text class="m-old-price" v-if="goods.wy_old_price * 1">原价:￥{{ goods.wy_old_price }}</text>
			<image :src="goods.product_image" mode="aspectFill" :lazy-load="true"></image>
			<view class="sold-out" v-if="goods.sold_out">
				<lang keywords="已售罄"></lang>
			</view>
		</view>

		<view class="info m-info">
			<view class="name">
				<view :class="(goods.active ? 'active' : '')">{{goods.product_name}}</view>
				<!-- <view class="num-box ellipsis">{{goods.product_describe}}</view> -->
			</view>
			<view v-if="klass && goods.product_describe" class="m-klass-tip">{{goods.product_describe}}</view>
			<view>
				<view class="price">
					<view class="block-in price-item" v-if="goods.sell_type == 2">
						<text>{{currency + goods.unit_price}}</text>
						<text class="price-small">/{{ goods.unit }}</text>
						<text class="unit">/<lang keywords="斤" chineseTxt="斤"></lang></text>
					</view>
						
					
					<view class="m-price-item" v-if="goods.sell_type != 2">
						<view class="block-in price-item" v-if="!goodsItemSpc.length">
							<text>{{ currency }}</text>
							<text>{{ goods.product_price }}</text>
							<text class="price-small">/{{ goods.unit }}</text>
							<lang style="font-size:11px;" v-if="goods.has_spec" :left="true" keywords="起"></lang>
						</view>
						
						<view v-else class="block-in price-item" v-for="(item,idx) in goodsItemSpc" :key="idx">
							<text>{{ currency }}{{ item.price }}/{{ item.spec }}</text>
						</view>
						
					</view>

					<view class="old-price block-in" v-if="goods.o_price>0 && goods.is_seckill_price && !goods.has_format && Number(goods.o_price) > Number(goods.product_price)">
						{{currency + goods.o_price}}
					</view>
				</view>
				<view class="count-box">
					<count klass="takeout-sub-count" :goods="goods" :refreshCount="refreshCount" @getGoods="getGoods"></count>
				</view>
			</view>
			<goodsTip :goods="goods"></goodsTip>
		</view>
	</view>
</template>

<script>
	import count from '../count/count.vue'
	import goodsTip from '../goodsTip/goodsTip.vue'
	var phoneInfo = '';
	export default {
		data() {
			return {
				isShow:true,
				phoneInfo: '',
				soldOut: false,
				goodsItemSpc:[],
			}
		},
		props: {
			klass:{
				type:String,
				default:""
			},
			goods: {
				type: Object,
				default: {}
			},
			refreshCount: {
				type: Boolean,
				default: true
			},
			currency: {
				type: String,
				default: '¥'
			}
		},
		watch: {
			refreshCount: {
				immediate: true,
				handler: function(val) {
					// console.log('商品refreshCount', val)
				}
			}
		},
		components: {
			count,
			goodsTip
		},
		mounted() {
			// 是否显示
			// console.log(this.goods)
			if(this.goods.price < this.goods.wy_old_price){
				this.isShow = false
			}
			
			// m多规格
			if(this.goods.spc){
				let spcListObj = JSON.parse(JSON.stringify(this.goods.spc))
				let spcList = Object.values(spcListObj)
				
				// console.log(spcList)
				
				let spcListFormat = []
				
				for(let i=0;i<spcList.length;i++){
					let item = spcList[i]
					let tmp = {}
					tmp.price = item.price
					tmp.spec = item.spec[0]['spec_val_name']
					spcListFormat.push(tmp)
				}
				
				this.goodsItemSpc = spcListFormat.slice(0,2)
				
				if(this.goodsItemSpc[0].price < this.goods.wy_old_price){
					this.isShow = false
				}
				
			}
			
			// 设备信息
			this.phoneInfo = wx.getSystemInfoSync();
			// 是否已售罄
			if (!this.goods.has_spec && this.goods.is_subsidiary_goods != 1 && ((!this.goods.is_seckill_price && this.goods.stock ==
						0) ||
					(this.goods.is_seckill_price && this.goods.seckill_stock == 0 && this.goods.stock == 0))) {
				this.soldOut = true
			}
		},
		methods: {
			getGoods(e) {
				console.log('第三次')
				console.log('点击了规格按钮')
				this.$emit('getGoods', e)
			}
		}
	}
</script>

<style lang="scss">
	.m-goods-img {
		position: relative;
	}
	.m-old-price {
		z-index: 9;
		position: absolute;
		top:0;
		right:0;
		height: 24px;
		line-height: 24px;
		padding: 0 10px;
		background-color: #ff5a00;
		color:#fff;
		font-size:10px;
		border-radius: 0 0 0 10px;
	}
	.m-old-price:after {
		content: '';
		position: absolute;
		top:50%;
		left:5px;
		width:calc(100% - 10px);
		height:1px;
		background-color: #ff0000;
	}
	
	.m-count-box {
		position: relative;
	}
	.m-info {
		position: relative;
		width: 100%;

		.price {
			display: flex;
			margin-top: 10upx;
			margin-bottom: 10upx;
		}

		// .m-price-item {
		// 	height: 44upx;
		// }

		.price-item {
			box-sizing: border-box;
			padding-right:2upx;
			margin-right: 6upx;
			margin-bottom:4upx;
			background-color: #fff2f2;
			border: 1px solid #ff5151;
			color: #ff0000;
			font-size: 10px;
			line-height: 1.5;
		}
	}

	.count-box {
		position: absolute;
		right: 0;
		bottom: -10upx;
		.count-btn .iconfont{
			font-size:16px;
		}
	}

	.item .goods-image {
		position: relative;
		width: 100%;
		height: 138upx;
		text-align: center;
	}

	.item .goods-image .sold-out {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		color: #fff;
		width: 100%;
	}

	.item image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.item .info {
		margin-top: 2vw;

	}

	.item .name {
		color: #333;
		font-size: 14px;
		font-weight: bold;
	}

	.item .name .active {
		color: #06c1ae;
	}

	.item .num-box {
		margin-bottom: 0;
		color: #999;
		font-weight: normal;
		font-size: 11px;
		line-height: 18px;
	}

	.item .num-box .num,
	.item .num-box .assess {
		margin-right: 5px;
	}

	.price-box .price .old-price {
		text-decoration: line-through;
		color: #999;
		font-size: 12px;
	}

	.price-box .stock {
		font-size: 11px;
		color: #999;
		margin-left: 5px;
	}

	.price-box .add-cart {
		background: #06c1ae;
		color: #fff;
		line-height: 26px;
		font-size: 12px;
		border-radius: 15px;
		padding: 0 10px;
		position: relative;
	}

	.price-box .add-cart.active {
		background: #999;
	}

	.price-box .add-cart .num {
		font-size: 10px;
		width: 16px;
		height: 16px;
		text-align: center;
		line-height: 16px;
		background: #ff3c00;
		border-radius: 50%;
		color: #fff;
		position: absolute;
		top: -9px;
		right: 0;
	}
	
	.takeout-sub{
		display: flex;
		margin-top:4vw;
		.m-goods-img{
			display: flex;
			align-items: center;
			width:20vw;
			image{
				width:100%;
				height:100%;
				border-radius: 6px;
			}
		}
		.m-info {
			margin-top:0;
			margin-left:3vw;
			margin-right:3vw;
			flex:1;
			.name{
				font-size:14px;
			}
			.price-item {
				color:#000;
				font-size:13px;
				font-weight: bold;
				border:none;
				background: none;
				margin-bottom:0;
			}
		}
	}
	.m-klass-tip {
		padding: 0 1vw;
		display: inline-block;
		background-color: #fcebb5;
		font-size:12px;
		color:#f8670e;
	}
</style>
